
<template>
  <div id="main3" style="width: 100%;height:100%;"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'Aosa',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      console.log(11);
      var myChart = echarts.init(document.getElementById('main3'))
      // 绘制图表
      myChart.setOption(
        {
          title: {
            text: '项目进度',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            left: 'center',
            top: 'bottom',
            data: ['项目进度']
          },
          xAxis: {
            name: '敏捷周期',
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7'],
            nameLocation: "middle",
            nameGap: 20
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '项目进度',
              data: [15, 20, 40, 65, 50, 70, 100],
              type: 'line',
              smooth: true,
              areaStyle: {

                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#7db6ef'
                },

                {
                  offset: 0.85,
                  color: 'rgba(126,171,233,0)'
                }
                ], false),


              },

            }]
        }
      )
      window.addEventListener('resize', function () {
        myChart.resize()
      })

    },

  }
}

</script>



